<template>
  <div class="detail-box">
    <div class="box-right">
      <div class="right-logo">
        <img src="@/assets/logo.jpg">
      </div>
      <header class="right-title">
        <p class="title">
          Dre-Design 个人主页
        </p>
        <p class="date">2017 Dre</p>
      </header>
      <div class="right-content">
        由SKETCH制作视觉页面，多次改版，精益求精，每次改版都推到代码重来，不做任何妥协。
        由WEB STORM撰写html代码，从零基础开始自学搭建页面样式，逻辑，动画。磕磕绊绊，但终于完成。
      </div>
    </div>
    <div class="left-container">
      <img src="@/assets/material01.jpg" style="width: 100%;">
      <img src="@/assets/material02.jpg" style="width: 100%;">
      <img src="@/assets/material02.jpg" style="width: 100%;">
      <img src="@/assets/material02.jpg" style="width: 100%;">
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
    }
  },
  mounted() {

  },
  methods: {
  }
}
</script>

<style scoped>
.detail-box {
  padding: 40px 400px 30px 30px;
}
.box-right {
  width: 260px;
  /*height: 550px;*/
  position: fixed;
  right: 60px;
  top: 40px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  padding: 20px;
}
.right-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}
.right-logo img {
  width: 120px;
}
.right-title {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 10px;
}
.right-title .title {
  font-size: 24px;
  line-height: 40px;
  opacity: 0.8;
}
.right-title .date {
  color: #2F201B;
  font-size: 14px;
  line-height: 30px;
  opacity: 0.5;
} 
.right-content {
  margin: 30px 0;
  text-align: justify;
  font-size: 14px;
  opacity: 0.7;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.left-container {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
</style>

